<div mat-dialog-title>{{ "TrueNAS Connect Service" | translate }}</div>
<mat-divider></mat-divider>
<mat-dialog-content>
  <div>
    @if (status() === TncStatus.Active) {
      <ix-icon class="status-connected" name="check_circle"></ix-icon>
    } @else if (status() === TncStatus.Disabled) {
      <ix-icon class="status-disabled" name="pause_circle_filled"></ix-icon>
    } @else if (status() === TncStatus.Failed){
      <ix-icon class="status-failed" name="cancel"></ix-icon>
    } @else if (status() === TncStatus.Waiting) {
      <ix-icon class="status-pending" name="pending"></ix-icon>
    } @else if (status() === TncStatus.Connecting) {
      <ix-icon class="status-connecting" name="pending"></ix-icon>
    }
    <span ixTest="tnc-status">{{ status() }}</span>
  </div>
  <div ixTest="tnc-status-reason">
    {{ TruenasConnectStatusReason[tnc.config().status] | translate }}
  </div>
</mat-dialog-content>
<div mat-dialog-actions>
  <button ixTest="tnc-settings" mat-button (click)="openSettings()">
    {{ "Settings" | translate }}
  </button>
  <button
    color="primary"
    mat-button
    ixTest="tnc-open"
    [disabled]="tnc.config().status !== TruenasConnectStatus.Configured"
    (click)="open()"
  >
    {{ "Open TrueNAS Connect" | translate }}
  </button>
</div>
